<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="type === 'set' ? $t('配置') : $t('查看')" :v-if="dialogVisible" :visible.sync="dialogVisible" :width="type === 'set' ? '610px' : '380px'" @close='close' top="20vh">
    <div class="dialogContentBox">
      <el-form ref="form" :model="record" :label-width="type === 'set' ? '80px' : '180px'" label-position="left" :rules="rules" style="margin:0 20px;">
        <el-form-item :label="$t('网络接口')" prop="PortName">
          {{ record.PortName }}
        </el-form-item>
        <el-form-item :label="$t('最大间隔')" prop="Maxinterval">
          <el-input v-emoji v-model="record.Maxinterval" ref="Maxinterval" style="width:215px" size='small' v-if="type === 'set'"></el-input><span class="radvdConfigText" v-if="type === 'set'">{{$t(' s {4-800} 0:未设定')}}</span>
          <span v-else>{{ record.Maxinterval }}</span>
        </el-form-item>
        <el-form-item :label="$t('最小间隔')" prop="Mininterval">
          <el-input v-emoji v-model="record.Mininterval" ref="Mininterval" style="width:215px" size='small' v-if="type === 'set'"></el-input> <span class="radvdConfigText" v-if="type === 'set'">{{$t(' s {3-max*0.75 default max*0.33} 0:未设定')}}</span>
          <span v-else>{{ record.Mininterval }}</span>
        </el-form-item>
        <el-form-item :label="$t('可达时间')" prop="Reachable">
          <el-input v-emoji v-model="record.Reachable" ref="Reachable" style="width:215px" size='small' v-if="type === 'set'"></el-input> <span class="radvdConfigText" v-if="type === 'set'">{{$t(' ms {0-3600000} 0:未设定')}}</span>
          <span v-else>{{ record.Reachable }}</span>
        </el-form-item>
        <el-form-item :label="$t('重传时间')" prop="Retrains">
          <el-input v-emoji v-model="record.Retrains" ref="Retrains" style="width:215px" size='small' v-if="type === 'set'"></el-input> <span class="radvdConfigText" v-if="type === 'set'">{{$t(' ms {0-4294967275} 0:未设定')}}</span>
          <span v-else>{{ record.Retrains }}</span>
        </el-form-item>
        <el-form-item :label="$t('跳转限制')" prop="Hoplimit">
          <el-input v-emoji v-model="record.Hoplimit" ref="Hoplimit" style="width:215px" size='small' v-if="type === 'set'"></el-input> <span class="radvdConfigText" v-if="type === 'set'"> ms {0-255}</span>
          <span v-else>{{ record.Hoplimit }}</span>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" v-if="type === 'set'" class="addSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getRadvdConfig, editRadvdConfig } from '@/api/network/route/radvd'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'RadvdConfigDialog',
  data () {
    var validateMaxinterval = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value === 0 || value === '0') {
        callback()
      } else if (value < 4 || value > 800) {
        callback(new Error(this.$t('最大间隔范围必须在4-800之间')))
      } else {
        if (this.record.Mininterval) {
          this.$refs.form.validateField('Mininterval')
        }
        callback()
      }
    }
    var validateMininterval = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value === 0 || value === '0') {
        callback()
      } else if ((this.record.Maxinterval === 0 || this.record.Maxinterval === '0') && value !== 0 && value !== '0') {
        callback(new Error(this.$t('最小间隔未配置')))
      } else if (this.record.Maxinterval < 4 || this.record.Maxinterval > 800) {
        callback(new Error(this.$t('最小间隔范围输入错误')))
      } else if (value < 3 || value > Number(parseInt(this.record.Maxinterval * 0.75))) {
        callback(new Error(this.$t('最小间隔范围必须在3-') + parseInt(this.record.Maxinterval * 0.75) + this.$t('之间')))
      } else {
        callback()
      }
    }
    var validateReachable = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 0 || value > 3600000) {
        callback(new Error(this.$t('可达时间范围必须在0-3600000之间')))
      } else {
        callback()
      }
    }
    var validateRetrains = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 0 || value > 4294967275) {
        callback(new Error(this.$t('重传时间范围必须在0-4294967275之间')))
      } else {
        callback()
      }
    }
    var validateHoplimit = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else if (!this.isInteger(value)) {
        callback(new Error(this.$t('只能输入整数')))
      } else if (value < 0 || value > 255) {
        callback(new Error(this.$t('跳转限制范围必须在0-255之间')))
      } else {
        callback()
      }
    }

    return {
      dialogVisible: false,
      record: {
        PortName: '',
        Maxinterval: '0',
        Mininterval: '0',
        Reachable: '0',
        Retrains: '0',
        Hoplimit: '0'
      },
      recordCopy: {
        PortName: '0',
        Maxinterval: '0',
        Mininterval: '0',
        Reachable: '0',
        Retrains: '0',
        Hoplimit: '0'
      },
      type: 'set',
      rules: {
        // PortName: [{ required: false, validator: validatePortName, trigger: 'blur' }],
        Maxinterval: [{ required: false, validator: validateMaxinterval, trigger: 'blur' }],
        Mininterval: [{ required: false, validator: validateMininterval, trigger: 'blur' }],
        Reachable: [{ required: false, validator: validateReachable, trigger: 'blur' }],
        Retrains: [{ required: false, validator: validateRetrains, trigger: 'blur' }],
        Hoplimit: [{ required: false, validator: validateHoplimit, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (data, type) {
      this.dialogVisible = true
      this.$nextTick(() => {
        const data = ['Maxinterval', 'Mininterval', 'Reachable', 'Retrains', 'Hoplimit']
        inputClass(this.$refs, data)
      })
      this.portNameList = []
      this.type = type
      if (data) {
        getRadvdConfig({ PortName: data.PortName }).then(res => {
          this.record = Object.assign(this.record, res.info[0])
        })
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          editRadvdConfig(this.record).then(res => {
            if (res.status === 0) {
              this.$message({
                message: this.$t('配置成功'),
                type: 'success'
              })
              this.close()
              this.$parent.listData()
            }
          })
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.form.resetFields()
      this.type = 'set'
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>
<style scoped>
.dialogContentBox {
  max-height: calc(60vh - 184px);
  overflow-y: auto;
}

.radvdConfigText {
  font-size: 12px;
  font-style: italic;
}
</style>
